<template>
	<view class="select-room-img">
		<view class="select_date_header">
			<p></p>
			<span>选择就餐场所(可多选)</span>
			<p @click="selectRoom">确定</p>
		</view>
		<view class="room_wrap">
			<view 
				class="img_item" 
				v-for="(item,index) in roomListFilter" 
				:key="item._id" 
				@click="handleChangeRoom(index)"
			>
				<image :class="[active === index && 'active']" :src="item.room_img" mode="aspectFill"></image>
				<p>{{item.name}}(0-{{item.max_person}}人)</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	export default {
		name: 'select-room-img',
		data() {
			return {
				active: 0
			}
		},
		computed: {
			...mapState({
				roomList: s => s.order.roomList,
				region: s => s.order.region
			}),
			...mapGetters(['roomListFilter'])
		},
		methods: {
			handleChangeRoom(index) {
				// if (this.active.includes(index)) {
				// 	this.active.splice(this.active.indexOf(index), 1)
				// } else {
				// 	this.active.push(index)
				// }
				// console.log(this.active);
				this.active = index
			},
			selectRoom() {
				// const items = this.roomListFilter.filter((_, i) => this.active.includes(i))
				const item = this.roomListFilter[this.active]
				this.$emit('selectRoom', item)
			}
		}
	}
</script>

<style lang="scss">
	.select-room-img {
		padding-bottom: 20rpx;
		font-size: 28rpx;
		
		.select_date_header {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			border-bottom: 1px solid #f4f4f4;
			p {
				width: 100rpx;
				height: 100%;
				color: #67C23A;
				text-align: center;
				line-height: 100rpx;
			}
		}
		
		.room_wrap {
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;
			
			.img_item {
				width: 200rpx;
				margin: 0 calc((100% - 200rpx * 3) / 3 / 2);
				
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 15rpx;
					box-sizing: border-box;
				}
				p {
					font-size: 24rpx;
					text-align: center;
				}
				.active {
					border: 6rpx solid #409EFF;
				}
			}
		}
	}
</style>